<template>
  <div class="box">
    <el-menu
      default-active="1-1"
      class="el-menu-vertical-demo"
      :default-openeds="openeds"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <el-submenu
        :index="item.id + ''"
        v-for="item in menuListWithChildren"
        :key="item.id"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{ item.name }}</span>
        </template>
        <el-menu-item-group v-for="item2 in item.list" :key="item2.id">
          <el-menu-item
            :index="item.id + '-' + item2.id + ''"
            @click="meunItem(item2)"
            >{{ item2.name }}</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
      <!-- 不带有子菜单的菜单项 -->
      <el-menu-item
        v-for="item in menuListWithoutChildren"
        :key="item.id"
        :index="item.id + ''"
        @click="meunItem(item)"
      >
        <i class="el-icon-document"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {

      meunPath: "/home",
      openeds: ["1"],
      menuList: [
        {
          name: "公司介绍",
          id: 1,
          list: [
            {
              name: "公司简介",
              id: 1,
              url: "/home",
            },
            {
              name: "关于我们",
              id: 2,
              url: "/home2",
            },
          ],
        },
        {
          name: "提货管理",
          id: 2,
          list: [
            {
              name: "申请提货",
              id: 1,
              url: "/activity",
            },
            {
              name: "提货记录",
              id: 2,
              url: "/deliveryRecord",
            },
            {
              name: "销售订单",
              id: 3,
              url: "/salesOrder",
            },
            {
              name: "车辆信息",
              id: 4,
              url: "/vehicleInformation",
            },
          ],
        },
      ],
    };
  },
  computed: {
    //有子菜单
    menuListWithChildren () {
      return this.menuList.filter((item) => item.list && item.list.length > 0);
    },
    //没有子菜单
    menuListWithoutChildren () {
      return this.menuList.filter(
        (item) => !item.list || item.list.length === 0
      );
    },
    isCollapse () {
      return this.$store.state.tad.isCollapse
    },
  },
  methods: {
    meunItem (e) {
      console.log(e);
      if (this.$route.path !== e.url) {
        this.meunPath = e.url;
        this.$router.push({
          path: e.url,
        });
        this.$store.commit('selectMenu', e)
        this.$emit('EventClick', e)
      }
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath, "handleOpen");
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, "handleClose");
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  border: none;
}
</style>